<template>
	<!-- 我的预约详情 -->
	<view class="container" v-for="(item, index) in cardlist" :key="item.id">
		<view class="appointment-info">
			<view @click="tpsub(item.sid)">
				<text class="name">{{ item.sname }}</text>
			</view>
			<div class="update">
				<image class="imges" src="/static/jk/sj.png"></image>{{ item.utime }}
			</div>
			<div class="updates">
				<image class="imges" src="/static/jk/ksy.png"></image>可使用
			</div>
			<button class="add-to-calendar" style="margin-bottom: 5px;">+加入手机日程</button>
		</view>
		<view class="qr-code">
			<view style="text-align: center;">
				<text class="ma" style="margin-right: 10px;">预约码</text><text>(向工作人员出示进行核销)</text>
			</view>
			<view style="margin: 5px;">
				<uv-qrcode ref="qrcode" size="300px" :value="item.qrcode"></uv-qrcode>
			</view>
		</view>
		<view class="appointment-details">
			<view style="text-align: center;margin-bottom: 15px;">
				<text class="reserve">预约信息</text>
			</view>
			<view class="detail-item">
				<view class="detail-text">姓名:</view>
				<view class="detail-ta">{{ item.uname }}</view>
			</view>
			<view class="detail-item">
				<view class="detail-text">手机号:</view>
				<view class="detail-ta">{{ item.contactphone }}</view>
			</view>
			<view class="detail-item">
				<view class="detail-text">上门地址:</view>
				<view class="detail-ta">{{ item.address }}</view>
			</view>
			<view class="detail-item">
				<view class="detail-text">户型面积:</view>
				<view class="detail-ta">{{ item.housearea }}</view>
			</view>
			<view style="color:gray;padding: 5px 0px;">
				<text style="font-size: 14px;">提交时间: </text>
				<text style="font-size: 12px;">{{ item.submittime }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getAppointmentById,
		getbyid,
		getDateById,
		getTimeById
	} from '@/request/api.js';

	const cardlist = ref([]);

	const id = ref('');

	onLoad(async (options) => {
		console.log('页面加载时获取用户数据', options.id);
		id.value = options.id;
		try {
			await showAppointment();
		} catch (error) {
			console.error("请求失败:", error);
		}
	});

	const showAppointment = async () => {
		try {
			const o = {
				id: id.value
			};
			const response = await getAppointmentById(o);
			if (response.data && response.data.data) {
				const item = response.data.data;
				const promises = Promise.all([
					getbyid({
						'id': item.sid
					}),
					getDateById({
						'id': item.sdateid
					}),
					getTimeById({
						'id': item.stimeid
					})
				]);
				const results = await promises;
				const [responseService, responseDate, responseTime] = results;
				let date = new Date(responseDate.data.data.date);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				let weekDay = date.getDay();
				let weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				let weekDayText = weekDays[weekDay];

				cardlist.value.push({
					id: item.id,
					sid: item.sid,
					uname: item.customername,
					contactphone: item.contactphone,
					address: item.address,
					housearea: item.housearea,
					submittime: item.submittime,
					sname: responseService.data.data.name,
					utime: `${year}-${month}-${day}` + "   " + responseTime.data.data.time,
					// 假设预约码是item.id
					qrcode: item.id
				});
				console.log(cardlist.value); // 显示到页面上
			} else {
				console.error("No data found in response");
			}
		} catch (error) {
			console.error("Error fetching showAppointment:", error);
		}
	}

	function tpsub(sid) { //跳转预约
		console.log("xxx:", sid)
		uni.navigateTo({
			url: `/pages/user/details/subscribe?id=${sid}`
		})
	}
</script>

<style>
	.add-to-calendar {
		text-align: center;
		border-radius: 8px;
		background-color: #fef2ce;
		color: #fbbd08;
		width: 140px;
		font-size: 15px;
		margin-top: 15px;
	}

	.update {
		font-size: 13px;
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.updates {
		color: #4caf50;
		display: flex;
		align-items: center;
	}

	.imges {
		width: 15px;
		height: 15px;
		margin-right: 8px;
	}

	.name,
	.ma,
	.reserve {
		font-weight: bold;
		/* 加粗文本 */
	}

	.container {
		padding: 20px;
		background-color: gainsboro;
	}

	.appointment-info,
	.qr-code,
	.appointment-details {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin-bottom: 20px;
		background-color: white;
		padding: 15px;

	}

	.name,
	.date,
	.status,
	.add-to-calendar {
		display: block;
		margin-bottom: 10px;
	}

	.qr-image {
		width: 200px;
		height: 200px;
		margin: 20px 0;
	}

	.detail-item {
		display: flex;
		width: 100%;
		/* justify-content: space-between; */
		padding: 10px 0;
		border-bottom: 1px dotted gray;
	}

	.detail-text {
		width: 25%;
		font-weight: bold;
		margin-right: 10px;
		font-size: 15px;
	}

	.detail-ta {
		width: 70%;
	}
</style>